<!-- 审核列表 -->
<template>
	<div class="systemAuditList" v-loading="systemAuditListLoading">
		<div class="title">审核列表</div>
    <div class="tableBox">
      <el-table :data="auditList" border size="mini"
        style="width: 100%" :header-cell-style="{color: '#444444',}"
      > 
        <el-table-column
          prop="id"
          label="序号"
          align="center">
          <template slot-scope="{$index}">
            {{$index + 1}}
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="identity"
          label="身份证"
          align="center">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          align="center">
        </el-table-column>
        <el-table-column
          prop="roles"
          label="角色类型"
          align="center">
        </el-table-column>
        <el-table-column
          prop="profession"
          label="专业"
          align="center">
        </el-table-column>
        <el-table-column
          prop="photo"
          width="100"
          label="头像"
          align="center">
          <template slot-scope="{ row }">
            <img class="headimg" :src="'http://47.112.16.168:' + row.headImg" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="审核"
          width="180"
          align="center">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="submitReview(scope.row.phone, true)">审核通过</el-button>
            <el-button type="danger" size="mini" @click="submitReview(scope.row.phone, false)">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

	</div>
</template>
<script>
import {mapActions, mapGetters} from 'vuex'
import common from '@/plugins/common'
export default {
  name: 'systemAuditList',
  data () {
    return {
      msg: 'hello systemAuditList!',
      systemAuditListLoading: false,
		}
  },
	methods: {
    ...mapActions([
      'fetchAuditList',
      'postAuditUser'
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.systemAuditListLoading = true

      await this.fetchAuditList({...this.searchForm, ...pageOption})

      this.systemAuditListLoading = false
    },
    
    async submitReview(phone, isReview) {
      this.systemAuditListLoading = true
      let result = await this.postAuditUser(common.formDataLoopAppen(new FormData, {phone, isReview}))
      if(result.message !== 'success') {
        this.$notify({
          type: 'warning',
          title: '提示',
          message: result.info,
        })
      }else {
        this.$notify({
          type: 'success',
          title: '成功',
          message: result.info,
        })
        this.onSubmit()
      }
      this.systemAuditListLoading = false
    }

  },
  computed: {
    ...mapGetters({
      auditList: 'getAuditList',
      userInfo: 'getUserInfo',

      //分页依赖
      pageSize: 'getPageSize',
    })
  },
  created() {
    this.onSubmit()

  },

}
</script>
<style scoped>
.systemAuditList {
  background: #fff;
  min-height: 100%;
  padding: 0 20px 0 20px;
}
.systemAuditList .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.systemAuditList .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  margin-bottom: 15px;
}
.experience .line {
  text-align: center;
}
.experience {
  margin-top: 20px;
  
}
.experience .subTit {
  font-size: 18px;
  color: #444;
  line-height: 44px;
  margin-bottom: 15px;
}
.headimg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
  box-shadow: 1px 1px 5px #757575;
  margin: 4px 0;
}
</style>
<style>

.systemAuditList .el-dialog__header {
  background-image: linear-gradient(90deg, 
    #4eb2ff 0%, 
    #0b69cb 100%
  ), 
  linear-gradient( 
    #1e87f0,
    #1e87f0
  );
  padding: 20px;
  color: #fff;
}

.systemAuditList .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>

